<script setup lang='ts'>
import type { EChartsOption } from 'echarts'

import { useAppointment, useFiling } from '@fl/api/fangjiaohui'
import { Echart } from '@fl/origin-components/Echart'
import * as echarts from 'echarts/core'
import { ElRow } from 'element-plus'
import { set } from 'lodash-es'

import { leftbarOptions, leftlineOptions, rightbarOptions, rightlineOptions } from './echarts-data'

const btnType = {
    day: 'day',
    week: 'week',
} as const

const areaStyle = {
    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
        color: 'rgba(17, 126, 255, 0.16)', // 0% 处的颜色
        offset: 0,
    }, {
        color: 'rgba(17, 128, 255, 0)', // 100% 处的颜色
        offset: 1,
    }]), // 背景渐变色
}
const itemStyleColor = {
    colorStops: [
        {
            color: '#FAC858',
            offset: 0, // start color
        },
        {
            color: '#F0B44C',
            offset: 1, // end color
        },
    ],
    type: 'linear',
    x: 0,
    x2: 0,
    y: 0,
    y2: 1,
}

const leftbarOptionsData = reactive<EChartsOption>(leftbarOptions) as EChartsOption
const leftlineOptionsData = reactive<EChartsOption>(leftlineOptions) as EChartsOption

const rightbarOptionsData = reactive<EChartsOption>(rightbarOptions) as EChartsOption
const rightlineOptionsData = reactive<EChartsOption>(rightlineOptions) as EChartsOption

const leftBtnType = ref<'day' | 'week'>('day')
const rightBtnType = ref<'day' | 'week'>('day')
const { data: leftChartsData, isLoading: leftChartsLoading } = useAppointment(leftBtnType)

const { data: rightChartsData, isLoading: rightChartsLoading } = useFiling(rightBtnType)

watch(leftChartsData, (nval) => {
    console.log('left')
    if (nval) {
        if (leftBtnType.value === btnType.day) {
            set(
                leftlineOptionsData,
                'xAxis.data',
                nval.keyList,
            )
            set(
                leftlineOptionsData,
                'series',
                [
                    {
                        animationDuration: 2800,
                        animationEasing: 'cubicInOut',
                        areaStyle,
                        color: '#4080FF',
                        data: nval.valueList,
                        name: '预约人数',
                        smooth: true,
                        type: 'line',

                    },
                ],
            )
        }
        else {
            set(
                leftbarOptionsData,
                'xAxis.data',
                nval.keyList,
            )
            set(
                leftbarOptionsData,
                'series',
                [
                    {
                        data: nval.valueList,
                        itemStyle: {
                            color: itemStyleColor,
                        },
                        name: '预约人数',
                        type: 'bar',
                    },
                ],
            )
        }
    }
}, { deep: true, immediate: true })
watch(rightChartsData, (nval) => {
    console.log('right')
    if (nval) {
        if (rightBtnType.value === btnType.day) {
            set(
                rightlineOptionsData,
                'xAxis.data',
                nval.keyList,
            )
            set(
                rightlineOptionsData,
                'series',
                [
                    {
                        animationDuration: 2800,
                        animationEasing: 'cubicInOut',
                        areaStyle,
                        color: '#4080FF',
                        data: nval.valueList,
                        name: '成交备案数量',
                        smooth: true,
                        type: 'line',

                    },
                ],
            )
        }
        else {
            set(
                rightbarOptionsData,
                'xAxis.data',
                nval.keyList,
            )
            set(
                rightbarOptionsData,
                'series',
                [
                    {
                        data: nval.valueList,
                        itemStyle: {
                            color: itemStyleColor,
                        },
                        name: '成交备案数量',
                        type: 'bar',
                    },
                ],
            )
        }
    }
}, { deep: true, immediate: true })
const leftCharts = computed(() => {
    return leftBtnType.value === btnType.day ? leftlineOptionsData : leftbarOptionsData
})
const rightCharts = computed(() => {
    return rightBtnType.value === btnType.day ? rightlineOptionsData : rightbarOptionsData
})
</script>

<template>
    <ElRow :gutter="20"
           justify="space-between"
    >
        <ElCol :xl="12"
               :lg="12"
               :md="24"
               :sm="24"
               :xs="24"
        >
            <ElCard :key="leftBtnType"
                    shadow="hover"
                    class="mb-20px"
            >
                <div class="flex justify-between items-center text-16 line">
                    <div>预约趋势</div>

                    <div>
                        <ElButton :type="leftBtnType === btnType.day ? 'primary' : ''"
                                  class="w-70 !m-0"
                                  @click="leftBtnType = btnType.day"
                        >
                            日
                        </ElButton>

                        <ElButton :type="leftBtnType === btnType.week ? 'primary' : ''"
                                  class="w-70 !m-0"
                                  @click="leftBtnType = btnType.week"
                        >
                            周
                        </ElButton>
                    </div>
                </div>

                <ElSkeleton :loading="leftChartsLoading"
                            animated
                >
                    <Echart id="leftCharts"
                            :options="leftCharts"
                            :height="300"
                    />
                </ElSkeleton>
            </ElCard>
        </ElCol>

        <ElCol :xl="12"
               :lg="12"
               :md="24"
               :sm="24"
               :xs="24"
        >
            <ElCard :key="rightBtnType"
                    shadow="hover"
                    class="mb-20px"
            >
                <div class="flex justify-between items-center text-16 line">
                    <div>成交备案趋势</div>

                    <div>
                        <ElButton :type="rightBtnType === btnType.day ? 'primary' : ''"
                                  class="w-70 !m-0"
                                  @click="rightBtnType = btnType.day"
                        >
                            日
                        </ElButton>

                        <ElButton :type="rightBtnType === btnType.week ? 'primary' : ''"
                                  class="w-70 !m-0"
                                  @click="rightBtnType = btnType.week"
                        >
                            周
                        </ElButton>
                    </div>
                </div>

                <ElSkeleton :loading="rightChartsLoading"
                            animated
                >
                    <Echart id="rightCharts"
                            :options="rightCharts"
                            :height="300"
                    />
                </ElSkeleton>
            </ElCard>
        </ElCol>
    </ElRow>
</template>

<style lang="scss" scoped>
@import './index.scss';
</style>
